<template>
  <div
    class="page-account"
    :style="'--bg-logo:' + 'url(' + login_logo + ');--bg-img:url(' + login_bg + ')'"
  >
    <div class="container" :class="[fullWidth > 768 ? 'containerSamll' : 'containerBig']">
      <swiper :options="swiperOption" class="swiperPross" v-if="fullWidth > 768">
        <!-- <swiper-slide
          class="swiperPic"
          style="width: 100%;"
          v-for="(item, index) in swiperList"
          :key="index"
        >
          <img :src="item.slide" style="object-fit: contain;" alt />
        </swiper-slide>-->
        <img :src="rightBanner" style="object-fit: contain" alt />

        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
      <div class="index_from page-account-container from-wh">
        <div class="page-account-top">
          <div class="page-account-top-logo">
            <div style="font-size: 20px; font-weight: 900">Hi~欢迎登录</div>
          </div>
        </div>
        <el-form
          ref="loginForm"
          :model="loginForm"
          :rules="ruleInline"
          @keyup.enter="handleSubmit('loginForm')"
        >
          <el-form-item prop="username">
            <el-input
              class="input"
              type="text"
              v-model="loginForm.account"
              placeholder="请输入用户名"
              size="medium"
            >
              <template #prefix>
                <div
                  style="
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 100%;
                    height: 100%;
                  "
                >
                  <div
                    class="iconfont-mxx mxx-yonghudengluguanli"
                    style="color: #a3a3a3"
                  ></div>
                </div>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              class="input"
              type="password"
              v-model="loginForm.pwd"
              placeholder="请输入密码"
              size="medium"
            >
              <template #prefix>
                <div
                  style="
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 100%;
                    height: 100%;
                  "
                >
                  <div class="iconfont-mxx mxx-mima" style="color: #a3a3a3"></div>
                </div>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="code">
            <!-- <div class="code">
              <el-input
                class="input"
                type="text"
                v-model="loginForm.code"
                placeholder="请输入验证码"
                size="medium"
              >
                <template #prefix>
                  <div
                    style="display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;"
                  >
                    <div class="iconfont-mxx mxx-yanzhengma" style="color:#a3a3a3;"></div>
                  </div>
                </template>
              </el-input>
              <div style="display: flex;align-items: center;">
                <img :src="imgcode" class="pictrue" @click="captchas" />
              </div>
            </div>-->
          </el-form-item>
          <el-form-item class="pt10 btn-box">
            <el-button
              type="primary"
              long
              :loading="loading"
              size="medium "
              @click="handleSubmit('loginForm')"
              class="btn"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="footer" v-if="copyright_show == 1">
   
      <img style="height:60px; width: 380px" :src="technicalSupport" />
      <div style="display: flex; justify-content: center">
        <div class="pull-right">{{ copyright }}</div>
        <div style="display: flex; margin-left: 40px">
          <img style="height: 20px; width: 17px; margin-right: 7px" :src="guobiao" />
          <div class="pull-right">{{ shoppingAuthorizeFilingNum }}</div>
        </div>
      </div>
    </div>

    <verifition-verify ref="verifyRef" @success="handlerOnVerSuccess"></verifition-verify>
  </div>
</template>
<script>
import { validUsername } from "@/utils/validate";
import { getLoginPicApi } from "@/api/user";
import { accountDetectionApi, frontDomainApi } from "@/api/systemConfig";
import VerifitionVerify from "./verifition/Verify.vue";

// import '@/assets/js/canvas-nest.min';

export default {
  components: {
    VerifitionVerify,
  },
  data() {
    return {
      fullWidth: document.documentElement.clientWidth,
      swiperOption: {
        pagination: ".swiper-pagination",
        autoplay: true,
      },
      loading: false,
      isShow: false,
      autoLogin: true,
      imgcode: "",
      loginForm: {
        account: "",
        pwd: "",
        captchaVO: {},
      },
      ruleInline: {
        account: [{ required: true, trigger: "blur", message: "请输入用户名" }],
        pwd: [{ required: true, trigger: "blur", message: "请输入密码" }],
      },
      login_captcha: 0,
      // jigsaw: null,
      login_logo: "", //登录logo
      login_bg: "", //登录背景图
      rightBanner: "",
      swiperList: [], //轮播图（废弃）
      defaultSwiperList: require("@/assets/images/sw.png"),
      key: "",
      redirect: "/onsite/home",
      otherQuery: {},
      copyright: "",
      version: "",
      copyright_show: 1,
      errorsNumber: 0, //账号密码输入错误次数
      guobiao: require("@/assets/images/guobiao.png"),
      technicalSupport: "",
      shoppingAuthorizeFilingNum: "",
    };
  },
  created() {
    const _this = this;
    document.onkeydown = function () {
      console.log(_this.$route.name);
      if (_this.$route.name === "login") {
        let key = window.event.keyCode;
        if (key === 13) {
          _this.handleSubmit("loginForm");
        }
      }
    };
    window.addEventListener("resize", this.handleResize);
  },
  watch: {
    fullWidth(val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      if (!this.timer) {
        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
        this.screenWidth = val;
        this.timer = true;
        let that = this;
        setTimeout(function () {
          // 打印screenWidth变化的值
          that.timer = false;
        }, 400);
      }
    },
    $route: {
      handler: function (route) {
        const query = route.query;
        if (query) {
          this.redirect = query.redirect;
          this.otherQuery = this.getOtherQuery(query);
        }
      },
      immediate: true,
    },
  },
  mounted: function () {
    this.$nextTick(() => {
      this.swiperData();
    });
    // this.captchas();
  },
  methods: {
    //校验成功之后
    handlerOnVerSuccess(repData) {
      this.loginForm.captchaVO = repData;
      this.success();
    },
    //账号失去焦点
    async onBlurAccount() {
      this.errorsNumber = await accountDetectionApi({ account: this.loginForm.account });
    },
    captchas: function () {
      this.imgcode = Setting.apiBaseURL + "/captcha_pro?" + Date.parse(new Date());
    },
    //获取登陆页面素材信息
    swiperData() {
      getLoginPicApi()
        .then((res) => {
          this.login_bg = res.backgroundImage;
          this.rightBanner = res.leftLogo || this.defaultSwiperList;
          this.login_logo = res.loginLogo;
          this.copyright = res.shoppingAuthorizeInfo;
          this.technicalSupport = res.technicalSupport;
          this.shoppingAuthorizeFilingNum = res.shoppingAuthorizeFilingNum;
          window.document.title = res.siteName + " - 登录";
          localStorage.setItem("platSiteName", res.siteName);
        })
        .catch(() => {
          this.rightBanner = this.defaultSwiperList;
        });
    },
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          if (Number(this.errorsNumber) > 2) {
            this.$refs.verifyRef.show();
          } else {
            this.success(null);
          }
        } else {
          return false;
        }
      });
    },
    success(params) {
      const loading = this.$loading({
        lock: true,
        text: "正在登录中.",
      });
      this.$store
        .dispatch("user/login", this.loginForm)
        .then(() => {
          this.$store.commit("product/SET_AdminProductClassify", []);
          this.$store.commit("product/SET_ProductBrand", []);
          this.$store.commit("merchant/SET_MerchantClassify", []);
          this.$store.commit("merchant/SET_MerchantType", []);
          loading.close();
          this.disabled = true;
          this.getUrl();
          this.$store
            .dispatch("user/getMenus", {
              that: this,
            })
            .then((res) => {
              this.$router.push({
                path: this.redirect || "/onsite/home",
                query: this.otherQuery,
              });
              // location.reload();
            });
        })
        .catch(async (err) => {
          await this.onBlurAccount();
          loading.close();
          this.disabled = false;
          if (this.$wechat.isPhone()) this.$dialog.error(err.message);
        });
    },
    handleResize(event) {
      this.fullWidth = document.documentElement.clientWidth;
      if (this.fullWidth < 768) {
        document.getElementsByTagName("canvas")[0].removeAttribute("class", "index_bg");
      } else {
        document.getElementsByTagName("canvas")[0].className = "index_bg";
      }
    },

    // 获取移动端域名
    getUrl() {
      frontDomainApi().then((res) => {
        this.$store.commit("settings/SET_FrontDomain", res);
      });
    },
    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== "redirect") {
          acc[cur] = query[cur];
        }
        return acc;
      }, {});
    },
  },

  beforeCreate() {
    if (this.fullWidth < 768) {
      document.getElementsByTagName("canvas")[0].removeAttribute("class", "index_bg");
    } else {
      document.getElementsByTagName("canvas")[0].className = "index_bg";
    }
  },
  beforeDestroy: function () {
    window.removeEventListener("resize", this.handleResize);
    document.getElementsByTagName("canvas")[0].removeAttribute("class", "index_bg");
  },
};
</script>

<style scoped lang="stylus">
>>> .el-input {
  background-color: #F4F6FA !important;
}

>>> .el-input::placeholder {
  color: #999;
}

>>> .el-button {
  border-radius: 200px;
}

>>> .el-input__prefix {
  width: 32px;
  height: 100%;
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
}
</style>
<style scoped lang="stylus">
.page-account {
  display: flex;
  width: 100%;
  background-image: var(--bg-img);
  background-size: cover;
  background-position: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: auto;
}

.page-account:after {
  content: '';
  background-image: var(--bg-logo);
  background-position-x: 50%;
  background-position-y: center;
  background-size: contain;
  background-repeat: no-repeat;
  display: #000;
  position: absolute;
  left: 30px;
  top: 30px;
  width: 120px;
  height: 60px;
}

.page-account .code {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 20px;
}

.page-account .code .pictrue {
  height: 40px;
}

.swiperPross {
  border-radius: 6px;
}

.swiperPross, .swiperPic, .swiperPic img {
  width: 360px;
  height: 100%;
}

.swiperPic img {
  width: 100%;
  height: 100%;
}

.container {
  height: 497px !important;
  padding: 0 !important;
  border-radius: 12px;
  z-index: 1;
  display: flex;
}

.containerSamll {
  /* width: 56% !important; */
  /* background: #fff !important; */
  display: flex;
  flex-direction: row-reverse;
  column-gap: 20px;
}

.containerBig {
  width: auto !important;
  background: #f7f7f7 !important;
}

.index_from {
  padding: 32px 40px 32px 40px;
  height: 100%;
  box-sizing: border-box;
  border-radius: 6px;
  background: #ffffff;
  color: #333;
}

.page-account-top {
  padding: 20px 0 24px 0 !important;
  box-sizing: border-box !important;
  display: flex;
  justify-content: center;
}

.page-account-container {
  border-radius: 0px 6px 6px 0px;
}

.btn {
  background: linear-gradient(90deg, rgba(25, 180, 241, 1) 0%, rgba(14, 115, 232, 1) 100%) !important;
}

.captchaBox {
  width: 310px;
}

input {
  display: block;
  width: 290px;
  line-height: 40px;
  margin: 10px 0;
  padding: 0 10px;
  outline: none;
  border: 1px solid #c8cccf;
  border-radius: 4px;
  color: #6a6f77;
}

.input {
  background: #F4F6FA;
}

#msg {
  width: 100%;
  line-height: 40px;
  font-size: 14px;
  text-align: center;
}

a:link, a:visited, a:hover, a:active {
  margin-left: 100px;
  color: #0366D6;
}

.index_from >>> .el-input__inner {
  background-color: #F4F6FA !important;
  font-size: 14px !important;
  height: 44px;
  border: none;
}

.index_from >>> .el-input--medium {
  border-radius: 6px;
  padding: 6px 7px;
}

.index_from >>> .el-button--medium {
  width: 100%;
  height: 44px;
}

.from-wh {
  width: 470px;
}





.pull-right {
  color: #A1A4AA;
}



.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  left: 0;
  margin: 0;
  // background: rgba(255, 255, 255, 0.8);
  border-top: 1px solid #e7eaec;
  overflow: hidden;
  padding: 10px 20px;
  height: 100px;
  z-index: 999;
  display: flex;
  flex-direction:column;
  justify-content: center;
  align-items:center;
}
</style>
